<template>
  <div>
    <div class="sign-main">
      <el-image :src="innerValue" alt="" v-if="innerValue" class="sign-img"
        :preview-src-list="srcList" />
      <div @click="addSign" class="sign-style" :class="{ 'disabled-btn': disabled }"
        v-if="!detailed && !isInvoke">
        <i class="icon-ym icon-ym-signature add-sign1"></i>
        <span class="sign-title" v-if="!innerValue">{{signTip}}</span>
      </div>
      <div class="sign-style" :class="{ 'disabled-btn': disabled }"
        v-if="!detailed && isInvoke">
        <el-dropdown trigger="click" @command="handleCommand" placement="bottom-start">
          <span>
            <i class="icon-ym icon-ym-signature add-sign1 dropdown"></i>
            <span class="sign-title" v-if="!innerValue">{{signTip}}</span>
          </span>
          <el-dropdown-menu slot="dropdown" :append-to-body="true">
              <el-dropdown-item command="1">手写签名</el-dropdown-item>
              <el-dropdown-item command="2">调用签名</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
      </div>

    </div>
    <SignImgDialog v-if="signVisible" ref="SignImg" :lineWidth='3' :isDefault='1' :type='1'
      @close="signDialog" />
    <!-- 个人签名列表   -->
    <el-dialog title="个人签名" class="JNPF-dialog JNPF-dialog_center sign-dialog"
      :closeOnClickModal='false' :visible.sync="signListVisible" append-to-body width="600px">
      <el-row class="sign-main-box">
        <template v-if="!signListInvoke.length">
          <el-empty description="暂无数据" :image-size="120"></el-empty>
        </template>
        <div v-else>
          <template v-for="(item,i) in signListInvoke">
            <el-col :span="6" class="sign-item" :key="i">
              <div :class="item.isDefault?'add-sign active':'add-sign'" @click="setMainSignInvoke(item,i)">
                <el-image :src="item.signImg" alt="" class="sign-img" />
                <div class="icon-checked1" v-if="item.isDefault">
                  <i class=" el-icon-check"></i>
                </div>
              </div>
            </el-col>
          </template>
        </div>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="signListVisible=false">取消</el-button>
        <el-button type="primary"  @click="handleSign()">确定</el-button>
      </span>
    </el-dialog>


  </div>
</template>
<script>
import SignImgDialog from '@/components/SignImgDialog'
import { getSign } from '@/api/permission/userSetting'
export default {
  name: 'JnpfSign',
  components: { SignImgDialog },
  props: {
    value: { type: String, default: '' },
    signTip: { type: String, default: '添加签名' },
    disabled: { type: Boolean, default: false },
    detailed: { type: Boolean, default: false },
    isInvoke: { type: Boolean, default: false }, // 调用签名
  },
  data() {
    return {
      signVisible: false,
      signListVisible:false,
      innerValue: '',
      srcList: [],
      signList:[],
      signListInvoke:[],
      srcDefaultImg:[],
    }
  },
  watch: {
    value: {
      handler(val) {
        this.innerValue = val || ''
        if (this.innerValue) this.srcList = [this.innerValue]
      },
      deep: true,
      immediate: true
    },
  },
  async created(){
  },
  methods: {
    handleCommand(index){
      if(!index)return
      if(index==2){
        this.addSignInvoke()
      }else{
        this.addSign()
      }
    },
    handleSign(){
      let choose = this.signListInvoke.filter(item=>item.isDefault==1)
      if(!choose[0]) return this.$message.warning('请选择签名')
      this.setValue(choose)
      this.signListVisible = false
    },
    setValue(choose){
      this.innerValue = choose[0].signImg
      this.srcList = [this.innerValue]
      this.$emit('input', this.innerValue)
      this.$emit('change',this.innerValue)
    },
    clear(){
      this.innerValue = ''
      this.srcList = []
      this.$emit('input', '')
      this.$emit('change','')
    },
    getSign(){
      return new Promise((resolve, reject) => {
        if(this.signList.length==0){
          getSign().then(res => {
            this.signList = res.data || []
            resolve(this.signList)
          })
        }else{
          resolve(this.signList)
        }
      })
    },
    setMainSignInvokeWithValue(val){
      for (let i = 0; i < this.signListInvoke.length; i++) {
        let item = this.signListInvoke[i]
        if(item.signImg === val) {
          this.setMainSignInvoke(item,i)
          break;
        }
      }
    },
    setMainSignInvoke(item,index){
      for(let i=0;i<this.signListInvoke.length;i++){
        let item = this.signListInvoke[i]
        item.isDefault = 0
        this.$set(this.signListInvoke,index,item)
      }
      item.isDefault = 1
      this.$set(this.signListInvoke,index,item)
    },
    async addSignInvoke(){
      if (this.disabled) return
      await this.getSign()
      this.signListInvoke = JSON.parse(JSON.stringify(this.signList))
      this.signListVisible = true
      this.$nextTick(()=>{
          this.clearChoose()
          if (this.value) {
            this.setMainSignInvokeWithValue(this.value)
          }
      })
    },
    clearChoose() {
      for (let i = 0; i < this.signListInvoke.length; i++) {
        let item = this.signListInvoke[i]
        item.isDefault = 0
        this.$set(this.signListInvoke, i, item)
      }
    },
    addSign() {
      if (this.disabled) return
      this.signVisible = true
      this.$nextTick(() => {
        this.$refs.SignImg.init()
      })
    },
    signDialog(val) {
      this.signVisible = false
      if (val) {
        this.srcList = [val]
        this.innerValue = val
        this.$emit('input', this.innerValue)
      }
      this.$emit('change',val)
    },
  }
}
</script>
<style lang="scss" scoped>
.sign-dialog {
  ::v-deep .el-dialog__body {
    overflow: hidden;
    height: 320px;
    overflow: auto;
    overflow-x: hidden;
    padding: 23px 14px 2px !important;
  }
}
.userInfo {
  height: 100%;
  overflow: hidden;
  ::v-deep .el-tabs__nav-scroll {
    padding-top: 0 !important;
  }
}
.sign {
  padding: 20px 50px 0px 50px;
}
.add-sign {
  position: relative;
  width: 118px;
  height: 100%;
  background-color: #fff;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  &.active {
    width: 118px;
    border: 1px solid #1890ff;
    flex: 1;
    box-shadow: 0 0 6px rgba(6, 58, 108, 0.26);
    color: #1890ff;
    .btn,
    .icon-checked {
      display: block;
    }
  }
  .add-button {
    position: absolute;
    display: none;
  }
  .add-icon {
    font-size: 50px;
    color: rgb(157, 158, 159);
  }
  .sign-img {
    width: 120px;
    height: 100%;
    border-radius: 10px;
    background-color:#fafafa;
  }
}
.add-sign:hover .add-button {
  display: flex;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background-color: rgba(157, 158, 159, 0.8);

  justify-content: center;
  align-items: center;
}
.icon-checked1 {
  display: block;
  width: 20px;
  height: 20px;
  border: 20px solid #1890ff;
  border-left: 20px solid transparent;
  border-top: 20px solid transparent;
  border-bottom-right-radius: 10px;
  position: absolute;
  transform: scale(0.8);
  right: -5px;
  bottom: -5px;
  i {
    position: absolute;
    top: -4px;
    left: -4px;
    font-size: 24px;
    color: #fff;
    transform: scale(0.8);
  }
}
.sign-item {
  height: 80px;
  margin:4px 0;
}
</style>
<style lang="scss" scoped>

.sign-img {
  width: 80px;
  height: 40px;
  object-fit: contain;
  cursor: pointer;
}

.sign-style {
  height: 40px;
  font-size: 14px;
  display: flex;
  align-items: center;
  cursor: pointer;
  &.disabled-btn {
    cursor: no-drop !important;
  }
  ::v-deep .dropdown{
    vertical-align:bottom;
  }
  .sign-icon {
    font-size: 28px;
  }
  .sign-title {
    height: 30px;
    font-size: 14px;
    color: #2188ff;
    margin-top: 4px;
  }
  .add-sign1 {
    font-size: 28px !important;
    color: #2188ff;
  }
}
</style>
